<template>
  <!--首页-->
  <div>
    <swiper :sliderList="sliderList"></swiper>
    <p class="msg" @click="lookMyMessage()"><img :src="src" alt="" width="40"><span v-if="noReadNum>0"></span></p>
    <div class="guangbo">
      <div class="marquee">
        <div class="marquee_title"><img :src="guangbo" alt="" width="21"></div>
        <div class="marquee_box">
          <ul class="marquee_list" :class="{marquee_top:animate}">
            <li v-for="(item,index) in messageInfoSysList" @click="goSysMessageInfoDetail(item.messageInfoId)">
              {{item.title}}
            </li>
          </ul>
        </div>
        <span @click.stop="lookSysMessage()"><img :src="arrow" alt="" height="15"></span>
      </div>
    </div>
    <ul class="cata">
      <li :style="firstbg">
       <span v-for="(item,index) in configNavigateList" v-if="index<4" @click="goJump(item)">
          {{ item.configName }}
        </span>
      </li>
      <li :style="twobg">
       <span v-for="(item,index) in configNavigateList" v-if="index>=4 && index<=7" @click="goJump(item)">
          {{ item.configName }}
        </span>
      </li>
      <li :style="threebg">
       <span v-for="(item,index) in configNavigateList" v-if="index>=8" @click="goJump(item)">
          {{ item.configName }}
        </span>
      </li>
    </ul>
    <ul class="link">
      <li @click="showTell(HoursHotline,1)"><span style="font-size: 15px;color: #FE642E">24H热线:{{HoursHotline}}</span>
      </li>
      <li @click="showTell(ServicePhone,2)"><span style="font-size: 15px;color: #FE642E">投诉专线:{{ServicePhone}}</span>
      </li>
    </ul>
    <more :recommendList="recommendList" :advList="advList" :moreParams="moreParams" :isOld="isOld"></more>
    <wv-tabbar :fixed="true">
      <wv-tabbar-item to="/index" is-on>
        <img class="weui-tabbar__icon" src="../../assets/home.png" slot="icon">
        主页
      </wv-tabbar-item>
      <wv-tabbar-item to="/saoma">
        <img class="weui-tabbar__icon" src="../../assets/saoma.png" slot="icon">
        扫码验证
      </wv-tabbar-item>
      <wv-tabbar-item to="/shangcheng">
        <img class="weui-tabbar__icon" src="../../assets/no.png" slot="icon">
        商城
      </wv-tabbar-item>
      <wv-tabbar-item to="/order">
        <img class="weui-tabbar__icon" src="../../assets/zhangdan.png" slot="icon">
        订单
      </wv-tabbar-item>
      <wv-tabbar-item to="/my">
        <img class="weui-tabbar__icon" src="../../assets/my.png" slot="icon"> 我的
      </wv-tabbar-item>
    </wv-tabbar>
    <div class="model" v-show="isVisible">
      <div class="bg"></div>
      <div class="modelContent">
        <img src="../../assets/close.png" alt="" width="15" @click="isVisible=false" class="close">
        <div>您的贵宾厅服务即将到期，可尊享限时续卡优惠</div>
        <p class="btn">
          <button @click="isVisible=false">取消</button>
          <button @click="goYouhui()">续卡优惠</button>
        </p>
      </div>
    </div>
    <div class="model" v-show="isshow">
      <div class="bg"></div>
      <div class="modelContent">
        <img src="../../assets/close.png" alt="" width="15" @click="isshow=false" class="close">
        <ul class="list">
          <li><img src="../../assets/tell.png" alt="" width="22">{{tellPhone}}</li>
          <li>{{callTip}}</li>
        </ul>
        <p class="btn">
          <button class="call" @click="goCallTellPhone(tellPhone)">拨打</button>
          <button class="cancel" @click="goCancel()">取消</button>
        </p>
      </div>
    </div>
    <mydialog :is-show="showAdvDialog" :top-distance="advDialogTopNum" @on-close="closeDialog">
      <div slot="main">
        <img :src="homeAdv.advImg| imgPathFilter" width="95%" height="95%" style="object-fit:cover" @click="goAdv()">
      </div>
    </mydialog>
  </div>
</template>

<script type="text/ecmascript-6">
import {getHotelAddress, getPlaneTicket, initHomeData} from '../../../test/unit/http'
import {getStore, removeStore, setStore} from '../../../test/unit/storage'
import swiper from '../offertemplate/swipertemplate'
import more from '../offertemplate/tuijianmore'
import mydialog from '../offertemplate/mydialog'
import kefususpend from '../suspend/kefususpend'

export default {
  name: '',
  props: {},
  data() {
    return {
      animate: true,
      messageInfoSysList: [],
      isVisible: false,
      isshow: false,
      src: require('../../assets/msg.png'),
      guangbo: require('../../assets/guangbo.png'),
      arrow: require('../../assets/right.png'),
      tell: require('../../assets/tell.png'),
      tell1: require('../../assets/phone.png'),
      firstbg: {
        background: 'url(' + require('../../assets/first.png') + ') no-repeat',
        backgroundSize: '100% 100%',
      },
      twobg: {
        background: 'url(' + require('../../assets/two.png') + ') no-repeat',
        backgroundSize: '100% 100%',
      },
      threebg: {
        background: 'url(' + require('../../assets/three.png') + ') no-repeat',
        backgroundSize: '100% 100%',
      },
      sliderList: [],
      recommendList: [],
      advList: [],
      HoursHotline: "",
      ServicePhone: "",
      moreParams: {entrySource: 'home'},
      tellPhone: '',
      isOld: false,
      noReadNum: 0,
      callTip: "是否拨打",
      showAdvDialog: false,
      advDialogTopNum: 13,
      homeAdv: {},
      configNavigateList: []
    };
  },
  methods: {
    closeDialog() {
      this.showAdvDialog = false;
      this.initClickHomeAdv()
    },
    lookMyMessage() {
      this.$router.push({path: 'msg', query: {messageType: 1}})
    },
    lookSysMessage() {
      this.$router.push({path: 'msg', query: {messageType: 2}})
    },
    goSysMessageInfoDetail(messageInfoId) {
      this.$router.push({path: 'msgdetail', query: {messageInfoId: messageInfoId}})
    },
    goAdv() {
      this.initClickHomeAdv();
      let jumpType = this.homeAdv.jumpType;
      if (jumpType == 1) {
        let url = this.homeAdv.content;
        window.location.href = this.$myUtils.convertHttpUrl(url);
      }
      if (jumpType == 2) {
        this.$router.push({path: 'advcontent', query: {advinfo: JSON.stringify(this.homeAdv)}})
      }
    },
    initClickHomeAdv() {
      removeStore("clickAdvInfo");
      let date = this.$myUtils.getNowDate();
      let data = {'date': date, isClick: true};
      setStore("clickAdvInfo", data);
    },
    showMarquee() {
      this.animate = true;
      setTimeout(() => {
        this.messageInfoSysList.push(this.messageInfoSysList[0]);
        this.messageInfoSysList.shift();
        this.animate = false;
      }, 500)
    },
    showTell(tellPhone, callType) {
      this.isshow = true;
      this.tellPhone = tellPhone;
      if (callType == 1) {
        this.callTip = "是否拨打24小时客服热线？";
      }
      if (callType == 2) {
        this.callTip = "是否拨打全国投诉监督专线？";
      }
    },
    goCancel() {
      this.isshow = false;
    },
    goCallTellPhone(tellPhone) {
      window.location.href = 'tel://' + tellPhone
    },
    goYouhui() {
      this.$router.push({path: '/zhuanxiang'})
    },
    goTravel() {
      getPlaneTicket({}).then(res => {
        console.log(res);
        if (res.code == 100) {
          let planeTicketAddress = res.object.planeTicketAddress;
          if (planeTicketAddress) {
            console.info('planeTicketAddress', planeTicketAddress);
            window.location.href = planeTicketAddress;
          }
        }
      })
    },
    jiuDianYuding() {
      getHotelAddress({}).then(res => {
        console.log(res);
        if (res.code == 100) {
          let hotelAddress = res.object.hotelAddress;
          if (hotelAddress) {
            console.info('hotelAddress', hotelAddress);
            window.location.href = hotelAddress;
          }
        }
      })
    },
    dynamicJsMethod(content) {
      let _this = this;
      let jsContent = '(function(){content})()';
      jsContent = jsContent.replace('content', content);
      //加载函数字符串，然后执行 }
      eval(jsContent)
    },
    /*
    *@Description: 导航跳转
    *@MethodAuthor: ...
    *@Date: 2021-12-27 10:16:12
   */
    goJump(configItem) {
      let isOpen = configItem.isOpen;
      if (isOpen == 2) {
        Toast.text('功能完善中，敬请期待');
        return
      }
      let configId = configItem.configId;
      let jumpType = Number(configItem.jumpType);
      let configContent = configItem.content;
      let pathUrl = configItem.pathUrl;
      let goodsId = configItem.goodsId;
      switch (jumpType) {
        //外部链接
        case 1:
          if (configContent) {
            window.location.href = configContent
          }
          break;
        //文本跳转
        case 2:
          break;
        //内部跳转
        case 3:
          let params = {'configId': configId};
          if (goodsId) {
            params['goodsId'] = goodsId
          }
          this.$router.push({
            'path': pathUrl,
            query: params
          });
          break;
        //js脚本
        case 4:
          this.dynamicJsMethod(configContent);
          break;
        default:
          break
      }
    },
    getHomeData() {
      initHomeData({}).then(res => {
        console.log(res);
        this.isReloadAlive = true;
        if (res.code == 100) {
          this.sliderList = res.object.sliderList;
          this.advList = res.object.advList;
          this.isOld = res.object.isOld;
          this.recommendList = res.object.recommendList;
          this.HoursHotline = res.object.HoursHotline.configVal;
          this.ServicePhone = res.object.ServicePhone.configVal;
          this.messageInfoSysList = res.object.messageInfoSysList;
          this.configNavigateList = res.object.configNavigateList;
          let isHaveHomeAdv = res.object.isHaveHomeAdv;
          if (isHaveHomeAdv) {
            let date = this.$myUtils.getNowDate();
            let data = JSON.parse(getStore("clickAdvInfo"));
            console.info("clickAdvInfoData", data);
            if (this.$myUtils.isNull(data)) {
              this.showAdvDialog = true;
            } else {
              let date1 = data.date;
              if (date != date1) {
                this.showAdvDialog = true;
              } else {
                this.showAdvDialog = false;
              }
            }
            this.homeAdv = res.object.homeAdv;
          }
          this.noReadNum = res.object.noReadNum;
          setInterval(this.showMarquee, 2000)
        }
      })
    },

  },
  created() {
    this.getHomeData();
  },
  components: {
    swiper,
    more,
    mydialog,
    kefususpend
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
.marquee {
  align-items: center;
  color: #333;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;

  .marquee_box {
    display: block;
    position: relative;
    width: 100%;
    height: 30px;
    overflow: hidden;

    .marquee_list {
      display: block;
      position: absolute;
      top: 0;
      left: 0;

      li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding-left: 10px;
      }
    }

    .marquee_top {
      transition: all 0.5s;
      margin-top: -30px
    }
  }
}

.msg {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2;

  span {
    display: block;
    width: 5px;
    height: 5px;
    background-color: #ff0000;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 5px;
  }
}

.guangbo {
  height: 43px;
  line-height: 43px;
  background-color: #fff;
  border-radius: 5px;
  width: 90%;
  box-shadow: 4px 3px 10px rgba(32, 162, 223, 0.16);
  text-align: left;
  position: absolute;
  margin-top: -20px;
  left: 50%;
  margin-left: -48%;
  z-index: 2;
  padding: 0 10px;

  img {
    vertical-align: middle;
    margin-right: 5px;
  }

  span {
    float: right;
  }
}

.cata {
  margin-top: 20px;
  padding: 10px;

  li {
    height: 68px;
    line-height: 68px;
    display: flex;
    text-align: center;
    color: #fff;

    span {
      flex: 1;
    }
  }
}

.link {
  display: flex;

  li {
    flex: 1;
  }

  img {
    vertical-align: middle;
    margin-right: 5px;
  }

  :first-child {
    color: #56a7ed;
  }

  :last-child {
    color: #12cf8d;
  }
}

.tab-icon {
  display: inline-block;
  position: relative;
}

.bg {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 50px;
}

.model .modelContent {
  background-color: #fff;
  border-radius: 8px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -43%;
  margin-top: -111px;
  z-index: 2;
  padding: 30px 10px 20px;
  width: 80%;
  font-size: 16px;
  color: #111;

  .close {
    position: absolute;
    right: 10px;
    top: 10px
  }

  div {
    text-align: left;
    width: 75%;
    margin: 20px auto;
  }

  .list {
    font-size: 15px;
    margin-bottom: 20px;

    li:first-child {
      color: #56a7ed;
      margin-bottom: 5px;

      img {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }

  .btn {
    button {
      height: 42px;
      line-height: 42px;
      color: #fff;
      outline: none;
      border: none;
      width: calc(50% - 20px);
      border-radius: 8px;
    }

    :first-child {
      background-color: #ccc;
      margin-right: 20px;
    }

    :last-child {
      background-color: #fc8c50;
    }

    .call {
      background-color: #2e94f0;
    }

    .cancel {
      background-color: #ccc;
    }
  }
}
</style>
